<template>
  <div class="demo-pagination-block">
    <el-config-provider :locale="zhCn">
      <el-pagination v-model:current-page="props.list.page" v-model:page-size="props.limit" :page-sizes="[props.limit]"
        :small="small" :disabled="disabled" background  :total="props.list.count" layout="total, sizes, prev, pager, next, jumper"
       @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-config-provider>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const small = ref(false)
const disabled = ref(false)
const props = defineProps(["list","limit"])
const emit = defineEmits(["change"])
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  // 调整数据每页的条数
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  emit("change",val)
}
</script>
  
<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
  